<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import SubmitBtn from '@/components/SubmitBtn.vue'
import { uploadImgUrl } from '@/common/config.js'
import { getPlatformListApi } from '@/apis/orderManagement.js'
import { carListApi } from '@/apis/car.js'
import uploadFile from '@/components/upload/index.vue'

const action = ref("")
const type = ref("")
const formData = ref({
  createdate: "", // 建单日期
  platformid: "", // 月台id
  carid: "", // 车辆
  expectdate: "", // 预计到达时间
  status: "", // 状态
  memo: "", // 备注内容
})
const confing = {
  api: '/logistics/inorder',
  requiredFields: [
    {
      key: 'platformid',
      name: '预计到月台达时间',
      type: 'select'
    },
    {
      key: 'carid',
      name: '车辆',
      type: 'select'
    }, {
      key: "expectdate",
      name: "预计到达时间",
      type: 'select'
    }
  ]
}
// 获取月台数据
const platShow = ref(false)
const platName = ref("")
const platList = ref([])
const getPlatformList = async () => {
  const res = await getPlatformListApi({ pageNum: 1, pageSize: 100 })
  if (res.total === 0) return
  platList.value = res.rows.map(item => {
    return {
      label: item.name,
      value: item.id
    }
  })
}
const platConfirm = (val) => {
  platName.value = val[0].label
  formData.value.platformid = val[0].value
}
// 获取车辆数据
const carShow = ref(false)
const carName = ref("")
const carList = ref([])
const getCarList = async () => {
  const res = await carListApi({ pageNum: 1, pageSize: 100 })
  if (res.total === 0) return
  carList.value = res.rows.map(item => {
    return {
      label: item.platenumber,
      value: item.id
    }
  })
}
const carConfirm = (val) => {
  carName.value = val[0].label
  formData.value.carid = val[0].value
}
// 预计到达时间
const selectDateShow = ref(false)
const handlerConfirmDate = (val) => {
  const { day, month, year } = val
  formData.value.expectdate = `${year}-${month}-${day}`
}

onLoad(async options => {
  confing.api = `/logistics/${options.type}`
  type.value = options.type
  await getPlatformList()
  await getCarList()
  if (!options.data) return
  const data = JSON.parse(options.data)
  uni.setNavigationBarTitle({ title: '编辑' })
  formData.value = { ...data }
  const plat = platList.value.find(item => item.value == data.platformid)
  platName.value = plat?.label ?? ''
  const car = carList.value.find(item => item.value == data.carid)
  carName.value = car?.label || ""
  action.value = uploadImgUrl(data.id)
})

</script>

<template>
  <view class="carinfo page_container">
    <view class="content">
      <u-form :model="formData" label-width="200">
        <u-form-item label="月台:" required>
          <u-input v-model="platName" disabled @click="platShow = true" placeholder="请选择月台" />
        </u-form-item>
        <u-form-item label="车辆:" required>
          <u-input v-model="carName" disabled @click="carShow = true" placeholder="请选择车辆" />
        </u-form-item>
        <u-form-item label="预计到达时间:" required>
          <u-input @click="selectDateShow = true" v-model="formData.expectdate" placeholder="请选择预计到达时间" />
        </u-form-item>
        <u-form-item label="备注:">
          <u-input v-model="formData.memo" placeholder="请输入备注" />
        </u-form-item>
        <!-- 使用上传组件，仅在formData.id存在时显示 -->
        <uploadFile :id="formData.id" :action="action" v-if="formData.id" />
      </u-form>
    </view>
    <u-select v-model="platShow" :list="platList" @confirm="platConfirm"></u-select>
    <u-select v-model="carShow" :list="carList" @confirm="carConfirm"></u-select>
    <u-picker v-model="selectDateShow" @confirm="handlerConfirmDate" mode="time"></u-picker>
    <SubmitBtn v-bind="confing" :formData="formData" />
  </view>
</template>

<style lang="scss" scoped>
.popup_more_list {
  height: 100rpx;
  width: 750rpx;

  .upload_img {
    border-top: 2px solid #eee;
  }
}


.carinfo {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 20rpx;

  .content {
    background: #fff !important;
    border-radius: 20rpx;
    padding: 0 40rpx;
    margin-bottom: 100rpx;
  }
}

::v-deep .uicon-plus {
  margin-top: 4rpx;
}

.more_list {
  width: 170rpx;
  padding-top: 30rpx;

  view {
    padding-bottom: 30rpx;
  }
}
</style>